<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
  <title>黑马面面</title>
  <link rel="stylesheet" href="./css/normalize.css"/>
  <!-- 先引入css文件 放到自己css文件的上面 -->
  <link rel="stylesheet" href="./css/swiper.min.css"/>
  <link rel="stylesheet" href="./css/index.css"/>
  <link rel="stylesheet" type="text/css" href="../qvliao01/css/normalize.css"/>
  <link rel="stylesheet" type="text/css" href="../qvliao01/css/default.css">
  <link rel="stylesheet" type="text/css" href="../qvliao01/css/styles.css">
  <link rel="stylesheet" href="../fxgc01/css/styles.css">
  <link rel="stylesheet" href="css/qvliao01.css">
  <link href="../my/css/style.css" rel="stylesheet" type="text/css"/>
  <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="../my/js/jquery.min.js"></script>
  <script type="text/javascript" src="../my/js/tab.js"></script>
  <style>
    .evaluate-list .discuss-print ul li {
      height: 100px !important;
    }

    #chatbox .p1 #profile {
      background-size: cover;
    }
    #chatbox #chatview {
      width: 100%;
    }

    #chatbox .floatingImg{
      transform: translateX(-50%);
      left: 50% !important;
    }

    #chatbox #chat-messages{
      width: 100% !important;
    }

    #chatbox #sendmessage{
      width: 100% !important;
    }
  </style>
  <!--[if IE]>
  <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>
<body>
<div class="page">
  <section class="warp">
    <!-- 头部区域 -->
    <header class="header">一起学</header>
    <!-- 导航栏部分 -->
    <nav class="nav">
      <a href="javascript:;" class="item">
        <img src="./icons/icon1.png" alt=""/>
        <span>语文</span>
      </a>
      <a href="javascript:;" class="item">
        <img src="./icons/icon2.png" alt=""/>
        <span>数学</span>
      </a>
      <a href="javascript:;" class="item">
        <img src="./icons/icon3.png" alt=""/>
        <span>英语</span>
      </a>
      <a href="javascript:;" class="item">
        <img src="./icons/icon4.png" alt=""/>
        <span>语文阅读</span>
      </a>
      <a href="javascript:;" class="item">
        <img src="./icons/icon5.png" alt=""/>
        <span>数学口算</span>
      </a>
      <a href="javascript:;" class="item">
        <img src="./icons/icon6.png" alt=""/>
        <span>英语绘本</span>
      </a>
    </nav>
    <!-- go模块 -->
    <section class="go">
      <img src="./images/go.png" alt=""/>
    </section>
  </section>
  <!-- 为你推荐模块 -->
  <section class="content">
    <!-- 头部 -->
    <div class="con-hd">
      <h4>
        <span class="icon"><img src="./icons/i2.png" alt=""/></span>
        为你推荐
      </h4>
      <a href="javascript:;" class="more" type="tuijian" onclick="aaa()">更多>></a>
    </div>
    <!-- 旋转木马轮播图模块 -->
    <div class="get_job_focus">
      <!-- Swiper -->
      <div class="swiper-container get_job_fo">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="https://player.bilibili.com/player.html?aid=50632773&bvid=BV1L4411b7bC&cid=88641749&page=1"><img
                    src="./images/a1.png" alt=""/></a>
            <p>小学数学--一年级数学动画课堂</p>
          </div>
          <div class="swiper-slide">
            <a href="https://player.bilibili.com/player.html?aid=55003411&bvid=BV184411T7pF&cid=96178937&page=1"><img
                    src="./images/a2.png" alt=""/></a>
            <p>小学英语基础必备之语法全突破</p>
          </div>
          <div class="swiper-slide">
            <a href="https://player.bilibili.com/player.html?aid=62320806&bvid=BV1ht411M7YH&cid=108321943&page=1"><img
                    src="./images/a3.png" alt=""/></a>
            <p>小学一年级语文上册-汉语拼音</p>
          </div>
        </div>
      </div>
      <!-- Add Arrows 根据需求这个代码放到 container外面 添加左右箭头-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </section>
  <!-- 充电学习模块 -->
  <section class="content study_con">
    <!-- 头部 -->
    <div class="con-hd">
      <h4>
        <span class="icon"><img src="./icons/i2.png" alt=""/></span>
        充电学习
      </h4>
      <a href="javascript:;" class="more" type="chongdian">更多>></a>
    </div>
    <!-- 学习模块轮播图模块 -->
    <div class="study">
      <!-- Swiper -->
      <div class="swiper-container study_fo">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="https://player.bilibili.com/player.html?aid=39055232&bvid=BV1st411C7jt&cid=68636919&page=1">
              <img src="./images/pic1.png" alt=""/>
              <h5>说低调英语，告别中式英语</h5>
              <p>756人学习</p>
            </a>
          </div>
          <div class="swiper-slide">
            <a href="https://player.bilibili.com/player.html?aid=39055232&bvid=BV1st411C7jt&cid=68636919&page=1">
              <img src="./images/pic2.png" alt=""/>
              <h5>小学思维导图记单词</h5>
              <p>278人学习</p>
            </a>
          </div>
          <div class="swiper-slide">
            <a href="https://player.bilibili.com/player.html?aid=39055232&bvid=BV1st411C7jt&cid=68636919&page=1">
              <img src="./images/a4.png" alt=""/>
              <h5>说低调英语，告别中式英语</h5>
              <p>378人学习</p>
            </a>
          </div>
          <div class="swiper-slide">
            <a href="https://player.bilibili.com/player.html?aid=66056759&bvid=BV174411B7DK&cid=114583456&page=1">
              <img src="./images/a5.png" alt=""/>
              <h5>小学英语歌谣</h5>
              <p>456人学习</p>
            </a>
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </section>
</div>
<div class="page" style="display: none;">
  <div id="chatbox">
    <div id="friendslist">
      <div id="topmenu">
        <span class="friends"></span>
        <span class="chats"></span>
        <span class="history"></span>
      </div>

      <div id="friends">
        <div class="friend">
          <img src="../qvliao01/img/1_copy.jpg">
          <p>
            <strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">米罗·巴德夫（Miro
              Badev）</font></font></strong>
            <span><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">mirobadev@gmail.com</font></font></span>
          </p>
          <div class="status available"></div>
        </div>

        <div class="friend">
          <img src="../qvliao01/img/2_copy.jpg">
          <p>
            <strong><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">马丁·约瑟夫</font></font></strong>
            <span><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">marjoseph@gmail.com</font></font></span>
          </p>
          <div class="status away"></div>
        </div>

        <div class="friend">
          <img src="../qvliao01/img/3_copy.jpg">
          <p>
            <strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">托马斯·肯尼迪（Tomas
              Kennedy）</font></font></strong>
            <span><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">tomaskennedy@gmail.com</font></font></span>
          </p>
          <div class="status inactive"></div>
        </div>

        <div class="friend">
          <img src="../qvliao01/img/4_copy.jpg">
          <p>
            <strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">恩里克·萨顿（Enrique
              Sutton）</font></font></strong>
            <span><font style="vertical-align: inherit;"><font
                    style="vertical-align: inherit;">enriquesutton@gmail.com</font></font></span>
          </p>
          <div class="status inactive"></div>
        </div>

        <div class="friend">
          <img src="../qvliao01/img/5_copy.jpg">
          <p>
            <strong><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"> 达内尔·斯特里克兰（Darnell
              Strickland）</font></font></strong>
            <span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">darnellstrickland@gmail.com</font></font></span>
          </p>
          <div class="status inactive"></div>
        </div>
      </div>
    </div>

    <div id="chatview" class="p1">
      <div id="profile">

        <div id="close">
          <div class="cy"></div>
          <div class="cx"></div>
        </div>

        <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">米罗·巴德夫（Miro
          Badev）</font></font></p>
        <span><font style="vertical-align: inherit;"><font
                style="vertical-align: inherit;">miro @ badev @ gmail.com</font></font></span>
      </div>
      <div id="chat-messages">
        <label><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">星期四02</font></font></label>

        <div class="message">
          <img src="../qvliao01/img/1_copy.jpg">
          <div class="bubble"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
            真的很酷的东西！
          </font></font>
            <div class="corner"></div>
            <span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">3分钟</font></font></span>
          </div>
        </div>

        <div class="message right">
          <img src="../qvliao01/img/2_copy.jpg">
          <div class="bubble"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
            您可以共享本教程的链接吗？
          </font></font>
            <div class="corner"></div>
            <span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">1分钟</font></font></span>
          </div>
        </div>

        <div class="message">
          <img src="../qvliao01/img/1_copy.jpg">
          <div class="bubble"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
            是的，等等
          </font></font>
            <div class="corner"></div>
            <span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">现在</font></font></span>
          </div>
        </div>

        <div class="message right">
          <img src="../qvliao01/img/2_copy.jpg">
          <div class="bubble"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
            您可以共享本教程的链接吗？
          </font></font>
            <div class="corner"></div>
            <span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">1分钟</font></font></span>
          </div>
        </div>

        <div class="message">
          <img src="../qvliao01/img/1_copy.jpg">
          <div class="bubble"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
            是的，等等
          </font></font>
            <div class="corner"></div>
            <span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">现在</font></font></span>
          </div>
        </div>

      </div>

      <div id="sendmessage">
        <input type="text" value="Send message...">
        <button id="send"></button>
      </div>

    </div>
  </div>
</div>
<div class="page" style="display: none;">
  <div class="page page-current" id="page-index" style="margin-bottom: 50px">
    <div class="content">
      <div class="content-inner">
        <div class="evaluate">
          <div class="evaluate-box">
            <div class="evaluate-list">
              <div class="evaluate-px">
                <div class="datum-rw">
                  <div class="datum-name">
                    <i><a href="javascript:;"><img src="../fxgc01/images/tx.png" alt=""></a></i>
                    <p><a href="javascript:;">喜欢花的美少女</a></p>
                  </div>
                  <div class="datum-time">
                    <p><span>2018-08-16</span><span> 款式：粉玫瑰</span></p>
                  </div>
                </div>
                <div class="discuss">
                  <p>很喜欢这花，送给女友的，她非常的喜欢</p>
                  <div class="discuss-print">
                    <ul>
                      <li class="on">
                        <a href="javascript:;"><img src="../fxgc01/images/a1.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a2.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a3.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a4.png" alt=""></a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="evaluate-px">
                <div class="datum-rw">
                  <div class="datum-name">
                    <i><a href="javascript:;"><img src="../fxgc01/images/tx.png" alt=""></a></i>
                    <p><a href="javascript:;">喜欢花的美少女</a></p>
                  </div>
                  <div class="datum-time">
                    <p><span>2018-08-16</span><span> 款式：粉玫瑰</span></p>
                  </div>
                </div>
                <div class="discuss">
                  <p>很喜欢这花，送给女友的，她非常的喜欢</p>
                  <div class="discuss-print">
                    <ul>
                      <li class="on">
                        <a href="javascript:;"><img src="../fxgc01/images/a1.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a2.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a3.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a4.png" alt=""></a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="evaluate-px">
                <div class="datum-rw">
                  <div class="datum-name">
                    <i><a href="javascript:;"><img src="../fxgc01/images/tx.png" alt=""></a></i>
                    <p><a href="javascript:;">喜欢花的美少女</a></p>
                  </div>
                  <div class="datum-time">
                    <p><span>2018-08-16</span><span> 款式：粉玫瑰</span></p>
                  </div>
                </div>
                <div class="discuss">
                  <p>很喜欢这花，送给女友的，她非常的喜欢</p>
                  <div class="discuss-print">
                    <ul>
                      <li class="on">
                        <a href="javascript:;"><img src="../fxgc01/images/a1.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a2.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a3.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a4.png" alt=""></a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="evaluate-px">
                <div class="datum-rw">
                  <div class="datum-name">
                    <i><a href="javascript:;"><img src="../fxgc01/images/tx.png" alt=""></a></i>
                    <p><a href="javascript:;">喜欢花的美少女</a></p>
                  </div>
                  <div class="datum-time">
                    <p><span>2018-08-16</span><span> 款式：粉玫瑰</span></p>
                  </div>
                </div>
                <div class="discuss">
                  <p>很喜欢这花，送给女友的，她非常的喜欢</p>
                  <div class="discuss-print">
                    <ul>
                      <li class="on">
                        <a href="javascript:;"><img src="../fxgc01/images/a1.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a2.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a3.png" alt=""></a>
                      </li>
                      <li>
                        <a href="javascript:;"><img src="../fxgc01/images/a4.png" alt=""></a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="Picture">
    <div class="Picture-box">
      <a href="javascript:;" class="mine open"><img src="images/up_ico.png" alt=""></a>
      <a href="javascript:;" class="Next open"><img src="images/next_ico.png" alt=""></a>
      <div class="theme">
        <img src="" alt="">
      </div>
      <a href="javascript:;" class="gb-btn">×</a>
    </div>
  </div>
</div>
<div class="page" style="display: none;">
  <section class="jq22-flexView">
    <header class="jq22-navBar jq22-navBar-fixed">
      <a href="javascript:;" class="jq22-navBar-item">
        <i class="icon"></i>
      </a>
      <div class="jq22-center">
        <span class="jq22-center-title">学习</span>
      </div>
      <a href="javascript:;" class="jq22-navBar-item"
         data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
        <i class="icon icon-sys"></i>
      </a>
    </header>
    <section class="jq22-scrollView">
      <div class="jq22-flex">
        <div class="jq22-user-img">
          <img src="../my/images/user.png" alt="">
        </div>
        <div class="jq22-flex-box">
          <h2>大鹏展翅</h2>
        </div>
        <div class="jq22-right-text">
          <div class="jq22-right-icon">12<i class="icon icon-st"></i></div>
          <button>商城</button>
        </div>
      </div>
      <div class="jq22-image-text">
        <a href="javascript:;" class="jq22-flex ">
          <div class="jq22-shrink-img">
            <img src="../my/images/s1.png" alt="">
          </div>
          <div class="jq22-flex-box">
            <h2>课程任务</h2>
          </div>
        </a>
        <a href="javascript:;" class="jq22-flex ">
          <div class="jq22-shrink-img">
            <img src="../my/images/s2.png" alt="">
          </div>
          <div class="jq22-flex-box">
            <h2>练习任务</h2>
          </div>
        </a>

      </div>
      <div class="jq22-study-title">
        <h2>我的课程</h2>
      </div>

      <div class="jq22-tab" data-ydui-tab style="padding-bottom:4rem">
        <ul class="tab-nav">
          <li class="tab-nav-item tab-active">
            <a href="javascript:;">
              <span>未结课</span>
            </a>
          </li>
          <li class="tab-nav-item">
            <a href="javascript:;">
              <span>已结课</span>
            </a>
          </li>
        </ul>
        <div class="tab-panel">
          <div class="tab-panel-item tab-active">
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">进度：<em>7</em>/8</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info" style="width:75%"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user2.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">进度：<em>2</em>/8</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info" style="width:25%"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user3.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">进度：<em>3</em>/8</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info" style="width:35%"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user4.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">进度：<em>5</em>/8</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info" style="width:65%"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user5.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">进度：<em>2</em>/8</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info" style="width:25%"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>编程</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">进度：<em>4</em>/8</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info" style="width:55%"></div>
                </div>
              </div>
            </a>
          </div>
          <div class="tab-panel-item">
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">已结课</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">已结课</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">已结课</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">已结课</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">已结课</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info"></div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="jq22-flex b-line">
              <div class="jq22-flex-box">
                <h1><em>英语</em>【公开课】jQuery在线学习教程</h1>
                <p>4月19号-9月18号 每周二13:00-16:00</p>
                <div class="jq22-flex" style="padding:0">
                  <div class="jq22-sml-user">
                    <img src="../my/images/user1.png" alt="">
                  </div>
                  <div class="jq22-flex-box">
                    <h3>初级菜鸟</h3>
                  </div>
                </div>
              </div>
              <div class="jq22-right-seep">
                <div class="jq22-seep-text">已结课</div>
                <div class="jq22-seep-res">
                  <div class="jq22-seep-info"></div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>


    </section>
    <footer class="jq22-footer jq22-footer-fixed">
      <a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-loan"></i>
                    </span>
        <span class="jq22-tabBar-item-text">首页</span>
      </a>
      <a href="javascript:;" class="jq22-tabBar-item jq22-tabBar-item-active">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-credit"></i>
                    </span>
        <span class="jq22-tabBar-item-text">学习</span>
      </a>
      <a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-ions"></i>
                    </span>
        <span class="jq22-tabBar-item-text">消息</span>
      </a>
      <a href="javascript:;" class="jq22-tabBar-item ">
                    <span class="jq22-tabBar-item-icon">
                        <i class="icon icon-car"></i>
                    </span>
        <span class="jq22-tabBar-item-text">我的</span>
      </a>
    </footer>
  </section>
</div>
<footer class="footer">
  <a href="javascript:" class="item">
    <img src="./icons/home.png" alt=""/>
    <p>首页</p>
  </a>
  <a href="javascript:" class="item">
    <img src="./icons/ms.png" alt=""/>
    <p>趣聊</p>
  </a>
  <a href="javascript:" class="item">
    <img src="./icons/net.png" alt=""/>
    <p>分享广场</p>
  </a>
  <a href="javascript:" class="item">
    <img src="./icons/user.png" alt=""/>
    <p>我的</p>
  </a>
</footer>
<
<script src="./js/flexible.js"></script>
<!-- 比如引入js文件 -->
<script src="./js/swiper.min.js"></script>
<script>
  $(document).ready(function () {
    var preloadbg = document.createElement('img');
    preloadbg.src = 'img/timeline1.png';
    $('#searchfield').focus(function () {
      if ($(this).val() == 'Search contacts...') {
        $(this).val('');
      }
    });
    $('#searchfield').focusout(function () {
      if ($(this).val() == '') {
        $(this).val('Search contacts...');
      }
    });
    $('#sendmessage input').focus(function () {
      if ($(this).val() == 'Send message...') {
        $(this).val('');
      }
    });
    $('#sendmessage input').focusout(function () {
      if ($(this).val() == '') {
        $(this).val('Send message...');
      }
    });
    $('.friend').each(function () {
      $(this).click(function () {
        var childOffset = $(this).offset();
        var parentOffset = $(this).parent().parent().offset();
        var childTop = childOffset.top - parentOffset.top;
        var clone = $(this).find('img').eq(0).clone();
        var top = childTop + 12 + 'px';
        $(clone).css({'top': top}).addClass('floatingImg').appendTo('#chatbox');
        setTimeout(function () {
          $('#profile p').addClass('animate');
          $('#profile').addClass('animate');
        }, 100);
        setTimeout(function () {
          $('#chat-messages').addClass('animate');
          $('.cx, .cy').addClass('s1');
          setTimeout(function () {
            $('.cx, .cy').addClass('s2');
          }, 100);
          setTimeout(function () {
            $('.cx, .cy').addClass('s3');
          }, 200);
        }, 150);
        $('.floatingImg').animate({
          'width': '68px',
          'left': '108px',
          'top': '20px'
        }, 200);
        var name = $(this).find('p strong').html();
        var email = $(this).find('p span').html();
        $('#profile p').html(name);
        $('#profile span').html(email);
        $('.message').not('.right').find('img').attr('src', $(clone).attr('src'));
        $('#friendslist').fadeOut();
        $('#chatview').fadeIn();
        $('#close').unbind('click').click(function () {
          $('#chat-messages, #profile, #profile p').removeClass('animate');
          $('.cx, .cy').removeClass('s1 s2 s3');
          $('.floatingImg').animate({
            'width': '40px',
            'top': top,
            'left': '12px'
          }, 200, function () {
            $('.floatingImg').remove();
          });
          setTimeout(function () {
            $('#chatview').fadeOut();
            $('#friendslist').fadeIn();
          }, 50);
        });
      });
    });
  });
</script>
<script>
  // 第一个函数里面是 为你推荐轮播图
  (function () {
    var swiper = new Swiper(".get_job_fo", {
      // 能够显示的 slider的个数
      slidesPerView: 2,
      // 每一个slide之间的距离
      spaceBetween: 30,
      centeredSlides: true,
      loop: true,
      // 添加左右箭头
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  })();
  // 第二个函数的轮播图
  (function () {
    //  如果有多个轮播图最好修改下 swiper-container
    var swiper = new Swiper(".study_fo", {
      // 我们可以可以看看到的是 2个半
      slidesPerView: 2.2,
      spaceBetween: 20,
    });
  })();
</script>
<script>
  $('.discuss-print ul li').height($('.discuss-print ul li').width());
  $('.evaluate .b-banner').height($('.evaluate .b-banner').width());
  /*弹框大图*/
  $('.gb-btn').click(function () {
    $('.Picture').hide();
    $('body').css('overflow', '');
  });
  var imgNum = $(".discuss-print ul li").length;
  var index = 0;

  function selectimg(index) {
    $('.discuss-print ul li').removeClass('on');
    $(".discuss-print ul li").eq(index).addClass("on");
    $('.theme').height($('.theme img').height());
    $('.theme img').attr('src', $('.discuss-print .on').find('img').attr('src'));
  }

  /*点击列表图*/
  $('.discuss-print ul li').click(function () {
    $('body').css('overflow', 'hidden');
    index = $(".discuss-print ul li").index(this);
    $('.discuss-print ul li').removeClass('on');
    $(this).addClass("on");
    $('.discuss-print ul li img').css('display', 'block');
    $('.Picture').show();
    $('.theme img').attr('src', $('.discuss-print .on').find('img').attr('src'));
    $('.theme').height($('.theme img').height());
  });
  $(".mine").click(function () {
    index--;
    if (index < 0) {
      index = imgNum - 1;
      selectimg(index);
    }
    selectimg(index);
  });
  $(".Next").click(function () {
    index++;
    if (index > imgNum - 1) {
      index = 0;
      selectimg(index);
    }
    selectimg(index);
  });
</script>
<script>
  $('.footer > a').each(function (index, elem) {
    $(elem).click(function () {
      for (let i = 0; i < $('body > .page').length; i++) {
        $($('body > .page')[i]).css('display', 'none');
      }
      $($('body > .page')[index]).css('display', 'block');
    });
  })

  $($('.page')[0]).find('[type="tuijian"]').click(function () {
    $(location).attr('href', "../list/index.html?str=为你推荐")
  });
  $($('.page')[0]).find('[type="chongdian"]').click(function () {
    $(location).attr('href', "../list/index.html?str=充电学习")
  })

  $('.warp .go').click(function () {
    $(location).attr('href', "../list/index.html?str=每日十练")
  })

  $('.warp .item').click(function () {
    var str = $(this).find('span').text();
    $(location).attr('href', "../list/index.html?str="+str)
  });
</script>
</body>
</html>
